<template>
  <div>
    <!--  面包屑导航区域 :to="{path:'/admin/welcome' 路由跳转 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/welcome'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>业务管理</el-breadcrumb-item>
      <el-breadcrumb-item>打卡点列表</el-breadcrumb-item>
      <el-breadcrumb-item>{{travel.name}}</el-breadcrumb-item>
      <el-breadcrumb-item to="/business/activity">{{activity.name}}</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  卡片视图区域  -->
    <el-card class="box-card">
      <!--   搜索与添加及刷新区域 :gutter间距  -->
      <el-row :gutter="20">
        <!--    搜索    -->
        <el-col :span="3">
          <el-tag type="success">当前游玩点为:{{travel.name}}</el-tag>
        </el-col>
        <el-col :span="3">
          <el-tag type="success">当前活动为:{{activity.name}}</el-tag>
        </el-col>
        <!--   新增按钮    type="primary"蓝色主要 -->
        <el-col :span="8">
          <el-button type="primary" @click="returnActivity()" icon="el-icon-s-promotion">返回活动</el-button>
          <el-button type="primary" @click="saveDialogVisible = true"  icon="el-icon-folder-add">新增打卡点</el-button>
          <el-button type="info" icon="el-icon-refresh" @click="refresh()">刷新</el-button>
        </el-col>
      </el-row>
      <!--   打卡点列表区域   -->
      <!--   打卡点表格   -->
      <el-table  :data="points">
        <!--   模板列-数据值    -->
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="游玩ID" prop="travelId"></el-table-column>
        <el-table-column label="活动ID" prop="activityId"></el-table-column>
        <el-table-column label="视频" prop="video"></el-table-column>
        <el-table-column label="时长" prop="time">
          <template slot-scope="scope">
            {{scope.row.time  | formatSecond}}
          </template>
        </el-table-column>
        <el-table-column label="收费" prop="charge" :formatter = "problemSourceFormat"></el-table-column>
        <el-table-column label="顺序" prop="sort"></el-table-column>
        <el-table-column label="创建时间" prop="createdAt"></el-table-column>
        <el-table-column label="修改时间" prop="updatedAt"></el-table-column>
        <!--<el-table-column label="当前行数据" style="display: none">
          <template slot-scope="scope">
            {{scope.row}}
          </template>
        </el-table-column>-->
        <!--   模板列-操作区    -->
        <!--   模板列-操作区-状态封号开关    -->
        <el-table-column label="黑名单/有效">
          <template slot-scope="scope">
            <el-switch v-model = "scope.row.status"
                       :active-value="0"
                       :inactive-value="1"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       @change="changedStatus(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <!--   模板列-操作区-修改和删除    -->
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <el-button type="primary" @click="showEditpoint(scope.row.id)" icon="el-icon-edit" size="mini">修改</el-button>
            <el-button type="danger" @click="del(scope.row.id)" icon="el-icon-delete" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  分页插槽    -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.page"
          :page-sizes="[1, 5, 50, 100]"
          :page-size="queryInfo.size"
          layout="total, sizes, prev, pager, next,jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <!--  添加模态框  -->
    <el-dialog
        title="添加打卡点信息"
        :visible.sync="saveDialogVisible"
        width="50%"
        @close = "saveDialogClosed">
      <!--   内容主体区域   -->
      <el-form :model="point" :rules="saveFormRules" ref="saveFormRef" label-width="110px">
          <el-form-item label="游玩名称" >
            <el-tag>{{travel.name}}</el-tag>
          </el-form-item>
          <el-form-item label="活动名称" >
            <el-tag>{{activity.name}}</el-tag>
          </el-form-item>
          <el-form-item label="标题" prop="title">
            <el-input v-model="point.title" @input="updateInput($event)"></el-input>
          </el-form-item>
          <big-file
              v-bind:id="'video-upload'"
              v-bind:suffixs="['mp4']"
              v-bind:text="'上传视频'"
              v-bind:after-upload="afterUpload"></big-file>
          <el-form-item label="预览">
            <video
                id="video"
                v-bind:src="point.video"
                controls="controls"
            >
            </video>
          </el-form-item>
          <el-form-item label="时长" prop="time">
            <el-input v-model="point.time" @input="updateInput($event)"></el-input>
          </el-form-item>
<!--          <el-form-item label="收费" prop="charge">-->
<!--            <el-input v-model="point.charge" @input="updateInput($event)"></el-input>-->
<!--          </el-form-item>-->
          <el-form-item label="收费" prop="charge">
            <el-select v-model="point.charge" placeholder="请选择" style="width:100%">
              <el-option
                  v-for="item in CHARGE"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="顺序" prop="sort">
            <el-input v-model="point.sort" @input="updateInput($event)"></el-input>
          </el-form-item>
      </el-form>
      <!--  底部按钮区域   -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="savepoint">保 存</el-button>
        <el-button @click="saveDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!--  修改模态框  -->
    <el-dialog
        title="修改打卡点信息"
        :visible.sync="editDialogVisible"
        width="50%"
        @close = "editDialogClosed">
      <!--   内容主体区域   -->
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="110px">
        <el-form-item label="游玩名称" >
          <el-tag>{{travel.name}}</el-tag>&nbsp;
          <el-tag>ID:{{travel.id}}</el-tag>
        </el-form-item>
        <el-form-item label="活动名称" >
          <el-tag>{{activity.name}}</el-tag>&nbsp;
          <el-tag>ID:{{activity.id}}</el-tag>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="editForm.title" @input="updateInput($event)"></el-input>
        </el-form-item>
        <big-file
            v-bind:input-id="'editVideo-upload'"
            v-bind:suffixs="['mp4']"
            v-bind:text="'上传视频'"
            v-bind:after-upload="afterUpload"></big-file>
        <el-form-item label="预览">
          <video
              v-bind:src="editForm.video"
              controls="controls"
          >
          </video>
        </el-form-item>
        <el-form-item label="时长" prop="time">
          <el-input v-model="editForm.time" @input="updateInput($event)"></el-input>
        </el-form-item>
<!--        <el-form-item label="收费" prop="charge">-->
<!--          <el-input v-model="editForm.charge" @input="updateInput($event)"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="收费" prop="problemSourceFormat">
          <el-select v-model="editForm.charge" placeholder="请选择"  style="width:100%">
            <el-option
                v-for="item in CHARGE"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="顺序" prop="sort">
          <el-input v-model="editForm.sort" @input="updateInput($event)"></el-input>
        </el-form-item>
      </el-form>
      <!--  底部按钮区域   -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editpoint">保 存</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/*
* 方法 methods:
*   problemSourceFormat 枚举替换
*   updateInput 更新键盘输入input值
*   list() 打卡点列表查询/刷新
*   handleSizeChange 监听页面条数变化
*   handleCurrentChange 监听页码值变化
*   addDialogClosed 监听添加模态框的关闭事件
*   editDialogClosed 监听修改模态框的关闭事件
*   addpoint 打卡点添加
*   showEditpoint 修改打卡点前根据id获取打卡点对象决定是否展示模态框
*   changedStatus 状态封号
*   del 删除打卡点
*   openFullScreen() 等待Loading加载
*   selectByName 模糊搜索
*   refresh() 刷新
*
* 生命周期 mounted:
*   _this.list() 页面初始化时候执行list
*
* 数据 data:function ():
*   point 打卡点实体数据
*   points:[] 一个point空数组
*   editForm 编辑表单
*   CHARGE 收费枚举
*   saveDialogVisible 模态框可视
*   editDialogVisible 模态框可视
*   addDialogVisible 控制模态框显示隐藏的布尔值
*   total 总条数
*   queryInfo 请求参数块
*   queryName 模糊搜索
*   saveFormRules 保存校验
*   editFormRules 修改校验
*
* */

import BigFile from "../../views/big-file"


export default {
    components:{BigFile},
    name: "Point",
    data:function (){
      return{
        point:{},
        CHARGE:[{value:"C",label:"收费"},{value:"F",label:"免费"}],
        points:[],
        queryInfo:{
          page:1,
          size:5,
        },
        queryName:"",
        total:0,
        saveDialogVisible:false,
        editDialogVisible:false,
        saveFormRules:{
          title:[
            {required:true,message:'请输入打卡点名称',trigger:'blur'},
            {min:3,max:10,message:'请打卡点名称在3~10个字符之间',trigger: 'blur'}
          ],
        },
        editFormRules:{
          title:[
            {required:true,message:'请输入打卡点名称',trigger:'blur'},
            {min:3,max:10,message:'请打卡点名称在3~10个字符之间',trigger: 'blur'}
          ],
        },
        editForm:{},
        travel:{},
        activity:{},
      }
    },
    mounted:function (){
      let _this = this;
      let travel = SessionStorage.get("travel") || {};
      let activity = SessionStorage.get("activity") || {};
      if(travel.isEmpty || activity.isEmpty){
        _this.$router.push("/welcome");
      }
      _this.travel = travel;
      _this.activity = activity;
      _this.list(1);//组件加载时立刻执行一次查询渲染数据
    },
    methods:{
      afterUpload(resp){
        let _this = this;
        let video = resp.content.path;
        _this.point.video = video;
        _this.editForm.video = video;
        _this.getTime();
      },
      getTime(){
        let _this = this;
        let ele = document.getElementById("video");
        _this.point.time = parseInt(ele.duration,10)
      },
      returnActivity(){
        let _this = this;
        _this.$router.push("/business/activity")
      },
      problemSourceFormat(data){
        if(data.charge == 'F'){
          return '免费'
        }
        if(data.charge == 'C'){
          return '收费'
        }
      },
      //更新键盘输入input值
      updateInput(e){
        let _this = this;
        _this.$forceUpdate()
      },
      //监听 pagesize当前页条数 改变的事件
      handleSizeChange(newSize){
        console.log(newSize)
        let _this = this;
        _this.$data.queryInfo.size=newSize;
        if(_this.$data.queryName !==""){
          _this.selectByName();
        }else{
          _this.list();//重新获取查询list,达到分页切换页面前进后退
        }
      },
      //监听 页码值 改变的事件
      handleCurrentChange(newPage){
        let _this = this;
        _this.$data.queryInfo.page=newPage;
        if(_this.$data.queryName !==""){
          _this.selectByName();
        }else{
          _this.list();//重新获取查询list,达到分页切换页面前进后退
        }
      },
      // 监听添加模态框的关闭事件
      saveDialogClosed(){
        let _this = this;
        _this.$refs.saveFormRef.resetFields()
        $("video").attr("src","");
      },
      // 监听添加模态框的关闭事件
      editDialogClosed(){
        let _this = this;
        _this.$refs.editFormRef.resetFields()
      },
      // 查询 所有打卡点
      list(page){
      let _this = this;
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/point/list',{
          page:_this.$data.queryInfo.page,
          size:_this.$data.queryInfo.size,
          travelId:_this.travel.id,
          activityId:_this.activity.id,
        }).then((response)=>{
              console.log("查询打卡点列表结果:",response);
              let resp = response.data;
              _this.points = resp.content.list;
              _this.total = resp.content.total;
            })
      },
      savepoint(page){
        let _this = this;
        _this.point.activityId = _this.activity.id;
        _this.point.travelId = _this.travel.id;
        _this.$refs.saveFormRef.validate(vaild=>{
          if(!vaild)return //如果验证通过才发起添加用户的网络请求
          _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/point/save',_this.point).then((response)=>{
            console.log("保存打卡点列表结果",response);
            let resp = response.data;
            if (resp.success){
              _this.$data.saveDialogVisible = false;
              _this.$data.editDialogVisible = false;
              _this.list(1);
              _this.$message.success('保存打卡点信息成功');
            }
          })
        })
      },
      editpoint(page){
        let _this = this;
        _this.$refs.editFormRef.validate(vaild=>{
          if(!vaild)return //如果验证通过才发起添加用户的网络请求
          _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/point/save',_this.editForm).then((response)=>{
            console.log("修改打卡点列表结果",response);
            let resp = response.data;
            if (resp.success){
              _this.$data.saveDialogVisible = false;
              _this.$data.editDialogVisible = false;
              _this.list(1);
              _this.$message.success('修改打卡点信息成功');
            }
          })
        })
      },
      showEditpoint(id){
        console.log("当前行id值",id);
        let _this = this;
        _this.$ajax.get(process.env.VUE_APP_SERVER+'/business/admin/point/selectId/'+id).then((response)=>{
          let resp = response.data;
          if(response.status !== 200){
            return _this.$message.error("查询打卡点信息失败");
          }
          _this.editForm = resp.content;
          console.log("ID查询打卡点列表结果:",response);
          _this.editDialogVisible = true;
        })
      },
      changedStatus(point){
        let _this = this;
        console.log("测试",point)
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/point/changedStatus',point).then((response)=>{
          if(response.status !=200){
            return _this.$message.error("修改状态失败")
          }
          _this.$message.success("修改状态成功")
          console.log("改变打卡点状态结果",response);
            let resp = response.data;
        })
      },
      del(id){
        this.$confirm('此操作将打卡点永久删除, 是否继续?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log("删除当前的id",id)
          let _this = this;
          _this.openFullScreen();
          _this.$ajax.delete(process.env.VUE_APP_SERVER+'/business/admin/point/delete/'+id).then((response)=>{
            console.log("删除打卡点列表结果:",response);
            let resp = response.data;
            if (resp.success){
              _this.list(1);
              _this.$message.success("删除打卡点成功")
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
            });
          });
        },
      openFullScreen() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 1000);
      },
      selectByName(page,queryName){
        let _this = this;
        _this.openFullScreen();
        console.log("当前搜索的name",_this.$data.queryName)
        _this.$ajax.post(process.env.VUE_APP_SERVER+'/business/admin/point/selectName',{
            page:_this.$data.queryInfo.page,
            size:_this.$data.queryInfo.size,
            name:_this.$data.queryName,
          }).then((response)=>{
          console.log("模糊查询打卡点名称结果:",response);
          let resp = response.data;
          _this.points = resp.content.list;
          _this.total = resp.content.total;
        })
      },
      refresh(){
        let _this = this;
        _this.openFullScreen();
        if(this.$data.queryName !==""){
          _this.selectByName();
        }else{
          _this.list();//重新获取查询list,达到分页切换页面前进后退
        }
      }
    },
}
</script>

<style lang="less" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
video{
  width: 100%;
  height: auto;
  margin-top: 10px;
}
</style>